<template>
	<view class="form-container">
		<!-- 加载中页面 -->
		<cumLoading v-show="loadPage"></cumLoading>
		<view v-show="!loadPage">
			<!-- 文章内容 -->
			<view class="show-content-container">
				<!-- 头图header -->
				<view class="header">
					<image class="header-img" src="https://lsol-house-upload.oss-cn-hangzhou.aliyuncs.com/2020-09-29wxls/other/skisVoteApp20240115/top.jpg" mode="widthFix"></image>
				</view>
			</view>
			<view v-if="[0].includes(form.status)" class="statusFormContainer">
				<view class="iconfont auditIconfont">&#xe626;</view>
				<view class="statusFormTxt">审核中...</view>
				<view class="tishiFormTxt">温馨提示:审核通过会通过短信通知</view>
				<view class="cus-submit-container return-submit-container" @click="navBack(1)">返回</view>
			</view>
			<view v-else-if="[1].includes(form.status)" class="statusFormContainer">
				<view class="iconfont passIconfont">&#xe624;</view>
				<view class="statusFormTxt">通过审核</view>
				<view class="cus-submit-container return-submit-container" @click="navBack(1)">返回</view>
			</view>
			<view class="ant-form-box" v-else>
				<view class="ant-form-xbox">
					<view class="ant-form-item">
						<view class="ant-form-item-title ant-form-item-xx">名称（必填）</view>
						<input class="ant-form-item-input_text" type="text" v-model="form.title">
					</view>
					<view class="ant-form-item">
						<view class="ant-form-item-title ant-form-item-xx">简介（必填）</view>
						<!-- <textarea class="ant-form-item-textarea_text" maxlength="-1" v-model="form.content" /> -->
						<input class="ant-form-item-input_text" type="text" v-model="form.content">
					</view>
					<view class="ant-form-item">
						<view class="ant-form-item-title ant-form-item-xx">为我的家乡上分（必传）</view>
						<view class="ant-form-item-upload_img" @click="chooseImage" v-show="!form.img">
							<view class="iconfont cameraIcon">&#xe687;</view>
							<view class="cameraText">上传照片</view>
						</view>
						<view class="ant-form-item-upload_img ant-form-item-exit_img" v-show="form.img">
							<image class="ant-form-item-exit_img_txt" :src="form.img"></image>
							<view class="ant-del-box" @click="delImg">删除重新上传</view>
						</view>
					</view>
					<view class="cus-submit-container" :class="{'cus-submit-container-ac':!isSubmit}" @click="handlerSubmit">提交</view>
					<view class="cus-submit-container return-submit-container" @click="navBack(1)">返回</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as api from '@/server/getData.js'
	import cumLoading from '@/components/cum-loading/cum-loading.vue'
	export default {
		components:{cumLoading},
		data(){
			return {
				loadPage:true,
				form:{
					title:'',
					content:'',
					img:''
				},
				isSubmit: false, //是否点击
			}
		},
		onLoad(){
			this.init_load()
		},
		methods:{
			async init_load(){
				try{
					await this.get_myWorkInfo()
				}catch(e){
					//TODO handle the exception
				}finally{
					this.loadPage = false
				}
			},
			async get_myWorkInfo(){
				try{
					const res = await api.work.my()
					if([0,1].includes(res.status)){
						this.form = res
					}
				}catch(e){
					//TODO handle the exception
				}
			},
			async handlerSubmit(){
				if(this.isSubmit) return
				try{
					this.isSubmit = true
					if(Object.values(this.form).filter(Boolean).length < 3){
						uni.showModal({
							title: '提示',
							content: '请填写内容',
							showCancel:false,
						});
						return
					}
					await api.work.create({
						...this.form,
						title:this.form.title.trim()
					})
					uni.showModal({
						title: '提示',
						content: '提交成功，等待审核通过',
						showCancel:false,
						success: (res)=> {
							if (res.confirm) {
								this.navBack(1)
							}
						}
					});
				}catch(e){
					//TODO handle the exception
				}finally{
					this.isSubmit = false
				}
			},
			navBack(num){
				uni.switchTab({
					url: '/pages/vote/index'
				})
				// uni.navigateBack({ delta: num })
			},
			// 删除照片
			delImg(){
				this.form.img = ''
			},
			// 选择照片
			async chooseImage(){
				try {
					const imgUrl = await this.uploadFile()
					this.form.img = imgUrl
				} catch (e) {} finally {
					uni.hideLoading()
				}
			},
			uploadFile() {
				return new Promise((resolve, reject) => {
					uni.chooseImage({
						count: 1,
						success: (chooseImageRes) => {
							const tempFilePaths = chooseImageRes.tempFilePaths
							uni.showLoading({ title: '识别中', mask: true })
							uni.uploadFile({
								url: 'https://gateway.wxls.pro/admin/apiPass/upload/0/skinsVote',
								filePath: tempFilePaths[0],
								name: 'file',
								success: (uploadFileRes) => {
									let { success, message, imgUrl, code } = ("string" === typeof uploadFileRes.data) ? JSON.parse(uploadFileRes.data): uploadFileRes.data
									if (!success) {
										uni.showToast({ title: '图片上传失败', duration: 2000, icon: 'none' })
										reject(false)
										return
									}
									resolve(imgUrl)
								}
							});
						}
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.form-container{
		.header{
			width: 100%;
			font-size: 0;
			.header-img{
				width: 100%;
			}
		}
		.statusFormContainer{
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding-top: 120rpx;
			.auditIconfont{
				font-size: 120rpx;
				color: #f2b442;
				margin-bottom: 20rpx;
			}
			.passIconfont{
				font-size: 120rpx;
				color: #4bca31;
				margin-bottom: 20rpx;
			}
			.statusFormTxt{
				font-size:32rpx;
				color:#333;
				margin-bottom: 20rpx;
			}
			.tishiFormTxt{
				font-size: 28rpx;
				color: #999;
			}
			.cus-submit-container{
				width: 550rpx;
				height: 80rpx;
				border-radius: 40rpx;
				font-size: 32rpx;
				background-color: #999;
				color: #FFF;
				text-align: center;
				line-height: 80rpx;
				margin: 20rpx 0 20rpx;
			}
			.return-submit-container{
				background-color: #FFF;
				color: #999;
				border: 1px solid #999;
			}
		}
		// 表单部分
		.ant-form-box{
			margin: 0 30rpx;
			.ant-form-xbox{
				width: 100%;
				padding: 30rpx;
				border-top-right-radius: 30rpx;
				border-bottom-left-radius: 30rpx;
				border-bottom-right-radius: 30rpx;
			}
			.ant-form-item{
				padding-bottom: 30rpx;
				.ant-form-item-title{
					font-family: inherit;
					font-size: 28rpx;
					font-weight: bold;
					color: #517191;
					padding-bottom: 24rpx;
				}
				.ant-form-item-xx::before{
					content: '*';
					color: #ff0000;
					margin-right: 12rpx;
				}
				.ant-form-item-input_text{
					height: 88rpx;
					border-radius: 6px;
					padding: 0 28rpx;
					border: 1px solid #eaeaea;
				}
				.ant-form-item-textarea_text{
					border-radius: 6px;
					border: 1px solid #eaeaea;
					width: 100%;
					padding: 28rpx;
				}
				.ant-form-item-upload_img{
					border-radius: 6px;
					border: 1px dotted #eaeaea;
					height: 300rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					color: #999;
					.cameraIcon{
						font-size: 60rpx;
					}
					.cameraText{
						font-size: 26rpx;
					}
				}
				.ant-form-item-exit_img{
					position: relative;
					width: 100%;
					font-size: 0;
					.ant-form-item-exit_img_txt{
						width: 100%;
						border-radius: 6px;
					}
					.ant-del-box{
						position: absolute;
						bottom: 0;
						height: 74rpx;
						background-color: rgba(0, 0, 0, .8);
						font-size: 32rpx;
						width: 100%;
						border-bottom-left-radius: 6px;
						border-bottom-right-radius: 6px;
						color: #FFF;
						text-align: center;
						line-height: 74rpx;
					}
				}
			}
			.cus-submit-container{
				width: 100%;
				height: 80rpx;
				border-radius: 40rpx;
				font-size: 32rpx;
				background-color: #999;
				color: #FFF;
				text-align: center;
				line-height: 80rpx;
				margin: 20rpx 0 20rpx;
			}
			.cus-submit-container-ac{
				background-color: #409EFF;
			}
			.return-submit-container{
				background-color: #FFF;
				color: #999;
				border: 1px solid #999;
			}
		}
	}
</style>